import type { RadioChangeEvent } from "antd";
import { Form, Radio, Checkbox, Cascader } from "antd";
import type { CheckboxValueType } from "antd/es/checkbox/Group";
import { useState } from "react";
import style from "./style.less";

const CheckboxGroup = Checkbox.Group;
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const options = [
  {
    value: "firstGrade",
    label: "一年级",
    children: [
      {
        value: "one",
        label: "1班"
      },
      {
        value: "two",
        label: "2班"
      },
      {
        value: "three",
        label: "3班"
      }
    ]
  },
  {
    value: "secondGrade",
    label: "二年级",
    children: [
      {
        value: "one",
        label: "1班"
      },
      {
        value: "two",
        label: "2班"
      },
      {
        value: "three",
        label: "3班"
      }
    ]
  }
];

const roleOptions = ["全部", "新闻审批", "视频审批"];
const RoleForm = () => {
  const [value1, setValue1] = useState("open");
  const [value2, setValue2] = useState("true");
  const [role, setRole] = useState<string[]>([]);

  const onChange1 = ({ target: { value } }: RadioChangeEvent) => {
    console.log("radio1 checked", value);
    setValue1(value);
  };

  const onChange2 = ({ target: { value } }: RadioChangeEvent) => {
    console.log("radio2 checked", value);
    setValue2(value);
  };

  const onRoleChange = (list: CheckboxValueType[]) => {
    setRole(list as string[]);
  };

  const handleCascaderChange = (value: any, selectedOptions: any) => {
    console.log(value, selectedOptions);
  };
  return (
    <>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        requiredMark={false}
        labelAlign="left"
        layout="vertical"
      >
        <Form.Item
          label="班级分配"
          name="title"
          rules={[{ required: true, message: "请输入标题!" }]}
        >
          <Cascader
            options={options}
            onChange={handleCascaderChange}
            placeholder="请选择"
            changeOnSelect
          />
        </Form.Item>

        <Form.Item
          label="人员状态"
          name="type"
          rules={[{ required: true, message: "请选择人员状态!" }]}
        >
          <div className={style.customRadioGroup}>
            <Radio.Group
              value={value1}
              buttonStyle="solid"
              onChange={onChange1}
            >
              <Radio.Button value="open">启用</Radio.Button>
              <Radio.Button value="close">禁用</Radio.Button>
            </Radio.Group>
          </div>
        </Form.Item>
        <Form.Item
          label="是否为班主任"
          name="headTeacher"
          rules={[{ required: true, message: "请选择!" }]}
        >
          <Radio.Group value={value2} onChange={onChange2}>
            <Radio value={"true"}>是</Radio>
            <Radio value={"false"}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="分配权限"
          name="role"
          rules={[{ required: true, message: "请选择!" }]}
        >
          <CheckboxGroup
            options={roleOptions}
            value={role}
            onChange={onRoleChange}
          />
        </Form.Item>

        {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item> */}
      </Form>
    </>
  );
};
export default RoleForm;
